{{ define "content" }}
    {{ if not .modal }}
    <div class="row" id="devices">
        <div class="x_panel">
            <div class="x_title">
                <h2>{{ i18n "Config YAML" . }}</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                    <li class="dropdown">
                        <a href="javascript:void(0);" data-placement="bottom" data-clipboard-action="copy" data-clipboard-target="#yaml" id="copy-button"><i class="glyphicon glyphicon-copy"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="/boggart/config/download" data-toggle="tooltip" title="{{ i18n "Download" . }}"><i class="glyphicon glyphicon-download-alt"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
    {{ else }}
    <style type="text/css">
        body { background: none !important }
    </style>
    {{ end }}

            <pre style="padding: 0;" class="snippet"><code class="yaml" id="yaml">{{ .yaml|raw }}</code></pre>
    {{ if not .modal }}
            </div>
        </div>
    </div>
    {{ end }}
{{ end }}

{{ define "head" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/highlightjs/css/tomorrow.min.css" false) }}
    {{ staticHTML (staticURL "/boggart/assets/vendor/clipboard.js/css/clipboard.min.css" false) }}
{{ end }}

{{ define "js" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/highlightjs/js/highlight.pack.min.js" false) }}
    {{ staticHTML (staticURL "/boggart/assets/vendor/clipboard.js/js/clipboard.min.js" false) }}

    <script type="application/javascript">
        var cbSuccess = function(e) {
            e.clearSelection();
            $(e.trigger).tooltip({
                title: '{{ i18n "Config copied" . }}'
            }).tooltip('show');
        };

        var cbError = function(e) {
            e.clearSelection();
        };

        $(document).ready(function () {
            hljs.initHighlightingOnLoad();

            if(ClipboardJS.isSupported()) {
                $('.snippet').each(function(){
                    $(this).prepend('<button class="btn" data-placement="bottom" data-clipboard-action="copy"><img class="clippy" width="13" src="/boggart/assets/vendor/clipboard.js/images/clippy.svg" alt="{{ i18n "Copy to clipboard" . }}"></button>');
                });

                var cb = new ClipboardJS('.snippet [data-clipboard-action]', {
                    target: function(trigger) {
                        return trigger.nextElementSibling;
                    }
                });
                cb.on('success', cbSuccess);
                cb.on('error', cbError);

                {{ if not .modal }}
                    var cbExt = new ClipboardJS('#copy-button');
                    cbExt.on('success', cbSuccess);
                    cbExt.on('error', cbError);
            } else {
                $('#copy-button').hide();
                {{ end }}
            }
        });
    </script>
{{ end }}